<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        常用的生命周期钩子：
            1.mounted:发送Ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
            2.beforeDestroy:清楚定时器。解绑自定义事件、取消订阅消息等【首位工作】
            
        关于销毁vue实例
            1.销毁后借助vue开发者工具看不到任何信息。
            2.销毁后自定义的事件会失败，但原生的DOM事件依然有效。
            3.一般不会再beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。
    -->
            
    <div id="root">
        <h2>n的值为{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vue</button>
    </div>

    <script type="text/javascript">
         Vue.config.productionTip = false;//阻止vue在启动的时候生成生产提示

         const vm = new Vue({
            el:"#root",
            data:{
                n:1
            },
            methods:{
                add(){
                    this.n+=1
                },
                bye(){
                    console.log('bye')
                    this.$destroy()
                }
            },
            //数据代理和数据监测创建之前
            //此时无法通过vm访问到data中的数据、methods中的方法
            beforeCreate(){
                console.log('beforeCreated')
                // console.log(this)   //没有data和methods
                // debugger
            },
            //此时可以访问到数据方法
            created(){
                console.log('created')
                // console.log(this)   //有data和methods
                // debugger
            },

            //这期间解析模板，生成虚拟DOM，但页面还不能显示解析好的内容

            //此时是未经VUE编译的DOM，所有对DOM的操作最终都不奏效(因为后续会立马将虚拟DOM转为真是DOM并插入页面)
            beforeMount(){
                console.log('beforeMount') 
                // debugger
            },

            //期间虚拟DOM转为了真实DOM

            mounted(){
                console.log('mounted')
                // debugger
            },

            //期间可以检测数据是否变化

            //数据更新则调用这个钩子
            //此时数据是新的，但页面还是旧的(页面尚未和数据保持同步)
            beforeUpdate(){
                console.log('beforeUpdate')
                console.log('此时n为',this.n)
                // debugger
            },
            
            //期间生成新的虚拟DOM树，与旧的虚拟DOM作比较，完成页面更新

            //此时数据是新的，页面也是新的
            updated(){
                console.log('updated')
                this.n = 98
                console.log('此时n为',this.n)
                // debugger
            },

            //此时data、methods、指令还可以用，即将被销毁,但是 不会再触发更新渲染了
            beforeDestroy(){
                console.log('beforeDestroy')
                this.n = 99
                // debugger
            },

            destroyed(){
                console.log('destroyed' )
                // debugger
            }
         })

    </script>
</body>
</html>